/* px 转化为rem */
@function rem($px){
	@return $px/108px * 1rem;
	//@return $px/64 rem;
}
*{
	margin:0;
	padding:0;
}
/* 头部 */
.header{
	width:100%;
	height:rem(450px);
	background:#4eb437;
	position:relative;
	.headPortrait{
		width:rem(185px);
		height:rem(185px);
		border-radius:50%;
		position:absolute;
		top:50%;
		margin-top:rem(-50px);
		margin-left:rem(175px);
		img{
			width:100%;
			height:100%;
			border-radius:50%;
		}
	}
	.userName{
		font-size:rem(40px);
		color:#ff5403;
		font-weight:bold;
		position:absolute;
		top:55%;
		left:rem(405px);
	}
}
/* 内容 第一排订单 */
.container{
	width:100%;
	height:auto;
	background:#f2f2f2;
	overflow:hidden;
	.order{
		width:100%;
		height:rem(220px);
		background:#FFF;
		margin-top:rem(30px);
		.allOrder{
			width:rem(255px);
			height:100%;
			float:left;
			border-right:rem(1px) solid #686868;
			position:relative;
			i{
				color:#fe5600;
				font-size:rem(62px);
				position:absolute;
				top:rem(40px);
				left:rem(100px);
			}
			p{
				text-align: center;
				margin-top:rem(125px);
				color:#515151;
				font-size: rem(40px);
			}
			.triangle{
				width:rem(25px);
				height:rem(25px);
				background:#FFF;
				border-top:rem(1px) solid #686868;
				border-left:rem(1px) solid #686868;
				position:absolute;
				top:rem(100px);
				left:rem(241px);
				transform:rotate(-45deg);
				/* Internet Explorer */
				-ms-transform:rotate(-45deg);
				/* Firefox */
				-moz-transform:rotate(-45deg);
				/* Safari 和 Chrome */
				-webkit-transform:rotate(-45deg);
				/* Opera */
				-o-transform:rotate(-45deg);
			}
		}
		.classify{
			float:right;
			width:rem(824px);
			height:100%;
			display:flex;
			align-content: center;
			li{
				width:25%;
				height:100%;
				text-align: center;
				div{
					margin-top:rem(40px);
					position:relative;
					i{
						color:#fe5600;
						font-size:rem(60px);
						display:block;
					}
					span{
						display:block;
						color:#515151;
						font-size:rem(40px);
						margin-top:rem(25px);
						font-weight:300;
					}
					.xiaoxi{
						width:rem(30px);
						height:rem(30px);
						border:rem(1px) solid #fe5600;
						border-radius:50%;
						font-size:rem(16px);
						color:#fe5600;
						background:#FFF;
						text-align: center;
						line-height: rem(30px);
						position:absolute;
						top:rem(-40px);
						left:rem(120px);
						z-index: 99;
					}
				}
			}
		}
	}

	/* 配送管理中心 */
	.delivery{
		width:100%;
		height:rem(200px);
		background:#f2f2f2;
		position:relative;
		.guanli{
			width:rem(290px);
			height:rem(80px);
			background:#4eb437;
			border-radius:rem(10px);
			text-align: center;
			color:#FFF;
			font-size:rem(38px);
			line-height: rem(80px);
			margin:auto;
			position:absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
		}
	}

	/* 第二排 */
	.Grid{
		width:100%;
		height:rem(220px);
		background:#FFF;
		display: flex;
		justify-content: flex-start;
		.Grid-cell{
			width:25%;
			height:100%;
			float:left;
			text-align: center;
			div{
				margin-top:rem(40px);
				position:relative;
				i{
					color:#fe5600;
					font-size:rem(60px);
					display:block;
				}
				span{
					display:block;
					color:#515151;
					font-size:rem(40px);
					margin-top:rem(25px);
					font-weight:300;
				}
				.xiaoxi{
					width:rem(30px);
					height:rem(30px);
					border:rem(1px) solid #fe5600;
					border-radius:50%;
					font-size:rem(16px);
					color:#fe5600;
					background:#FFF;
					text-align: center;
					line-height: rem(30px);
					position:absolute;
					top:rem(-40px);
					left:rem(140px);
					z-index: 99;
				}
			}
		}
	}
	/* 第三排 */
	.threeRow{
		width:100%;
		height:rem(470px);
		background:#FFF;
		margin-top:rem(30px);
		li{
			float:left;
			width:25%;
			height:rem(220px);
			text-align: center;
			div{
				margin-top:rem(40px);
				i{
					font-size:rem(60px);
					display:block;
				}
				.icon-shoucang1{
					color:#f20200;
				}
				.icon-zuji{
					color:#1099da;
				}
				.icon-dingwei003{
					color:#f5f400;
				}
				.icon-kefu{
					color:#803efd;
				}
				.icon-guanyuwomen{
					color:#000000;
				}
				span{
					display:block;
					color:#515151;
					font-size:rem(40px);
					margin-top:rem(25px);
					font-weight:300;
				}
			}
		}
	}
}

/* 退出账号 */
.out{
	width:100%;
	height:rem(605px);
	background:#f2f2f2;
	position:relative;
	.outName{
		background:#fe5600;
		width:rem(290px);
		height:rem(80px);
		border-radius:rem(10px);
		text-align: center;
		color:#FFF;
		font-size:rem(38px);
		line-height: rem(80px);
		margin:auto;
		position:absolute;
		top:0;
		margin-top:rem(220px);
		left:0;
		right:0;
		bottom:0;
	}
}

/* 底部导航栏内容 */
.footer{
	width:100%;
	height:rem(133px);
	background:#f3f3f3;
	position:fixed;
	left:0;
	bottom:0;
	z-index:22;
	ul{
		height:100%;
		display:flex;
		align-items:center;
		li{
			width:25%;
			text-align:center;
			span{
				display:block;
				font-size:rem(60px);
				color:#00a313;
			}
			p{
				font-size:rem(30px);
				color:#00a313;
			}
		}
	}
}